<template>
  <div class="home">
    <h1 style="color: #6f7180;border:1px;background-color: #2c3e50">- {{city}}</h1>
    <!-- 按钮导航 -->
  </div>
</template>

<script>
  export default {
    name: "City",
    data () {
      return {
        cityArr:['北京','上海','广州','深圳','茂名','张家界','清远','汕头','佛山']
      }
    },
    methods:{
      backFn : function(index){
        // 调用vuex的ations设置城市的值
        this.$store.dispatch("setCityName", this.cityArr[index]);

        //返回到首页
        this.$router.push("/");
      }
    },
    computed:{
      city:function() {
        this.$store.dispatch("setCityName", this.cityArr[2]);
        // 通过vuex的getters方法来获取state里面的数据
        return this.$store.getters.getCityFn;
      }
    }
  }
</script>

<style scoped>

</style>
